<!DOCTYPE html>
<html>
    <head>
        <title>pullmenu</title>
		
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.min.css" />
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery.mobile-1.1.1.min.js"></script>
		
		<style>
			.bg{
				background:url(img/bg.png);
			}
			/*
			*	设置透明背景
			*/
			.option01{
				width:15em;
				height:10em;
				padding:1em;
				background:rgba(177,11,97,0.5) none repeat !important;
				filter:Alpha(opacity=50);
				background:#b10b61;
			}
			.option02{
				width:15em;
				height:10em;
				padding:1em;
				background:rgba(177,11,97,0.5) none repeat !important;
				filter:Alpha(opacity=50);
				background:#b10b61;
			}
			.option01 li{
				position:relative;
			}
			.option02 li{
				position:relative;
			}
			h3{
				color:#fd1c02;
			}
		</style>
    </head>
	
    <body>
      	<div data-role="page" class="bg">
			<div data-role=header data-theme="e">
				<div data-role="navbar">
					<ul>
						<li><img class="water" src="img/water.png"/><br><h6>浇水</h6></li>
						<li><img class="fertilize" src="img/fertilize.png"/><br><h6>施肥</h6></li>
						<li><img class="xin" src="img/xin.png"/><br><h6>写心情</h6></li>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
					</ul>
				</div><!-- /navbar -->
			</div>
  			<div data-role=content class="content">
				<div class="option01">
					<ul>
						<li><h3>1壶</h3></li>
						<li><h3>2壶</h3></li>
						<li><h3>3壶</h3></li>
						<li><h3>4壶</h3></li>
					</ul>
				</div>
				<div class="option02">
					<ul>
						<li><h3>有机肥</h3></li>
						<li><h3>无机肥</h3></li>
					</ul>
				</div>
  			</div>
		
		</div><!-- /page -->
		<!-- JiaThis Button BEGIN -->
			<script src="http://v3.jiathis.com/code/jiathis_r.js?uid=1345949877664741&move=0" charset="utf-8"></script>
		<!-- JiaThis Button END -->
    </body>
</html>
<script>
	$(document).ready(function(){
		$('.option01').hide();
		$('.option02').hide();
		$('.water').click(function(){
			$('.option02').hide();
			$('.option01').slideToggle("slow");
			//$(this).toggleClass("cerrar");
		});
		$('.fertilize').click(function(){
			$('.option01').hide();
			$('.option02').slideToggle();
		});
	});
</script>